<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="icon"
          th:href="@{/static/picture.ico}"
          type="image/x-icon"/>
    <link th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/font-awesome/css/font-awesome.css}" rel="stylesheet"/>
    <script th:src="@{/static/util/js/jquery-2.1.0.js}"></script>
    <script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/static/layer/layer.js}"></script>
    <style>
        .hide {
            display: none;
        }

        .divT {
            display: block;
            position: fixed;
            bottom: 90px;
            right: 10px;
            width: 40px;
            height: 40px;
            background: #9d9d9d;
            line-height: 40px;
            float: right;
            text-align: center
        }
        .openPanel:hover .myPanel {
            box-shadow: 5px 5px 5px #888888;
            display: block;

        }

        .openPanel .myPanel {
            display: none;
            height: 380px;
            position: absolute;
            top: 51px;
            width: 300px;
            background: #222;
            right: -20px;
            padding: 30px;

        }

        .myPanel .row .col-sm-6 {
            cursor: pointer;
            background: #2b542c;
            margin-top: 10px;
        }

        .myPanel .row .col-sm-6:hover {
            background: #1b6d85;
        }
    </style>
</head>
<body>
<header class="header">
    <div class="navbar navbar-inverse " style="border-radius: 0;">
        <div class="container">
            <div class="row">
                <div class="col-sm-9">
                    <div class="navbar-header ">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target=".navbar-collapse">
                            <span class="sr-only">切换导航</span> <span class="icon-bar"></span>
                            <span class="icon-bar"></span> <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand  hidden-xs hidden-sm" href="/">OAEC学习平台</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">


                            <shiro:hasPermission name="用户查询">
                                <li><a th:href="@{/user/list}"><i class="fa fa-user-o"
                                                                  style="margin-right: 10px"></i>用户管理</a></li>
                            </shiro:hasPermission>
                            <shiro:hasPermission name="角色查询">
                                <li><a th:href="@{/role/list}"><i class="fa fa-bookmark-o"
                                                                  style="margin-right: 10px"></i>角色管理</a></li>
                            </shiro:hasPermission>
                            <shiro:hasPermission name="资源查询">
                                <li><a th:href="@{/permission/list}"><i class="fa fa-question-circle-o"
                                                                        style="margin-right: 10px"></i>资源管理</a></li>
                            </shiro:hasPermission>
                            <li role="separator" class="divider"></li>
                            <shiro:hasPermission name="分组查询">
                                <li><a th:href="@{/group/list}"><i class="fa fa-group"
                                                                   style="margin-right: 10px"></i>分组管理</a></li>
                            </shiro:hasPermission>


                            <li><a onclick="zxtx()" href="javascript:"><i class="fa fa-wechat"></i>在线通信</a></li>


                        </ul>

                    </div>
                </div>
                <div class="col-sm-3 hidden-xs hidden-sm">
					<span class="pull-right openPanel" style="color: white; line-height: 50px;">

						<div class="myPanel">
							<div class="row" >
								<div class="col-sm-5" th:if="${session.loginUser!=null}">
									<img th:src='${session.loginUser.img}' onclick="allMyInfo()" class="img-circle"
                                         height="80"/>
								</div>
								<div class="col-sm-7" style="line-height: 40px">
                                    <div style="height: 40px"><shiro:principal property="nickname"/></div>
                                    <div style="height: 40px"><shiro:principal property="createTime"/></div>
                                </div>
							</div>
                            <hr/>
                                    <div class="row">
                                            <div class="col-sm-6" onclick="chooseImg()">
                                                <i class="fa fa-user-circle-o" style="margin-right:10px"></i>
                                                选择头像
                                            </div>
                                            <div class="col-sm-6" onclick="resetPwd()">
                                                <i class="fa fa-key " style="margin-right:10px"></i>
                                                修改密码
                                            </div>
                                            <div class="col-sm-6" onclick="resetNickName()">
                                                <i class="fa fa-address-card-o" style="margin-right:10px"></i>
                                                修改昵称
                                            </div>
                                            <div class="col-sm-6" onclick="allMyInfo()">
                                                <i class="fa fa-navicon" style="margin-right:10px"></i>
                                                我的信息
                                            </div>
                                    </div>

                            <hr/>
                            <a  th:href="@{/logout}">
                                <span style="display: inline-block;width:90px ;height: 40px;line-height: 40px;background: #2b542c;text-align: center;cursor: pointer">

							   <i class="fa fa-mail-reply-all"></i> 安全退出
                                </span>
                            </a>



						</div>

                        <i class="fa fa-user"></i> <span><shiro:principal property="nickname"/></span>
						<img th:if="${session.loginUser!=null}" th:src='${session.loginUser.img}' class="img-circle" height="40"/>

					</span>
                </div>

            </div>


        </div>
    </div>

    <script th:inline="javascript">
        /*<![CDATA[*/
        ctxPath = /*[[@{/}]]*/ '';

        /*]]>*/
        function zxtx() {
            layer.open({
                maxmin: true,
                title: "在线通信",
                type: 2,
                shade: 0,
                area: ['700px', '530px'],
                content: [
                    ctxPath+'chat',
                    'no']
            });
        }
        function resetPwd() {
            layer.prompt({title: '请输入原密码，并确认', formType: 0}, function (oldPass, index) {
                layer.close(index);
                layer.prompt({title: '请输入新密码，并确认', formType: 1}, function (newPass1, index) {
                    layer.close(index);
                    layer.prompt({title: '请再次输入新密码，并确认', formType: 1}, function (newPass2, index) {
                        layer.close(index);
                        if (newPass1 == newPass2) {
                            $.post(ctxPath + "resetPwd", {oldPass: oldPass, newPass: newPass1}, function (data) {
                                layer.alert(data);
                            })
                        } else {
                            layer.alert("两次密码不一致");
                        }
                    });
                });
            });
        }

        function resetNickName() {
            layer.prompt({title: '请输入新昵称', formType: 0}, function (nickname, index) {
                layer.close(index);
                $.post(ctxPath + "resetNickName", {nickname: nickname}, function (data) {
                    layer.alert(data);
                })


            });
        }

        function allMyInfo() {
            layer.open({
                type: 2,
                title: '我的信息',
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '480px'],
                content: ctxPath + 'myself' //iframe的url
            });
        }

        function chooseImg() {
            layer.open({
                type: 2,
                title: '选择头像',
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '640px'],
                content: ctxPath + 'chooseImg' //iframe的url
            });
        }
        //用与免登录模式下session注入
        var loginUser=[[${session.loginUser}]];
        if(loginUser==null){
            location.href=ctxPath+"";
        }

    </script>
</header>
<div class="container" layout:fragment="content"></div>
<footer class="footer">
    <div class="divT hide" onclick="ReturnTop();"><i class="fa fa-chevron-up"></i></div>

    <footer class="footer">
        <div class="container-fluid">
            <hr/>
            <div class="row footer-bottom">
                <ul class="list-inline text-center">
                    <li><a >京ICP备11008151号</a></li>
                    <li>京公网安备11010802014853</li>
                </ul>
            </div>
        </div>
    </footer>

    <script>
        window.onscroll = function () {
            var current = $(window).scrollTop();
            if (current > 180) {
                $(".divT").removeClass("hide");
            } else {
                $(".divT").addClass("hide");
            }
        };

        function ReturnTop() {
            $(window).scrollTop(0);
        }
    </script>
</footer>
</body>
</html>